<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <script src="js/jquery-form/vue/vue.js"></script>
    <script src="js/jquery/jquery.js"></script>
    <script src="js/jquery-form/jquery.form.js"></script>
    <title>Title</title>

</head>
<body>
<!--    页面模板   -->
<div id="app">
    <form id="formId" action="">
        请输入URL:<input name="url" id="url">
        <input type="button" id="btn" @click="submitForm()" value="提交">
    </form>

    <p v-html="verse.zs_title"></p>
    <p v-html="verse.niandai_zuozhe"></p>
    <p v-html="verse.zs_xu"></p>
    <p v-html="verse.zs_content"></p>
</div>
    <script>
        //获取url上的请求参数
        function getParams() {
            //获取问号及问号后面的内容
            var url = window.location.search;
            var params = new Object();
            if (url.indexOf("?") != -1) {
                //截取问号后面的内容,再使用&分割多个属性
                var arr = url.substr(1).split("&");
                for (var i = 0; i < arr.length; i++) {
                    //使用=分割为keyvalue
                    var keyValue = arr[i].split("=");
                    params[keyValue[0]] = keyValue[1];
                }
            }
            return params;
        }


        var app = new Vue({
            el: '#app', <!-- 获取页面模板 -->
            data: { //vue 渲染模板时需要数据
                verse:{

                }
            },
            methods:{
                submitForm:function () {
                    //获取url
                    var _url = $('#url').val();
                    console.log(_url);
                    var _this = this;
                    /*//获取url
                    var _url = getParams().url;
                    console.log(_url);
                    var _this = this;
                    $.get("http://localhost:8080/crawler/verse",{url:_url},function (data) {
                        _this.verse = data;
                    })*/
                    /*$('#formId').ajaxSubmit({
                        url:"http://localhost:8080/crawler/verse",
                        type:"GET",
                        success:function (data) {
                            console.log(data);
                            //访问成功后做的事
                            if (data.success){
                                //成功
                                _this.verse = data;
                                window.location.href="http://localhost:8080/list.html";
                                //window.location.reload();
                            }
                        }
                    })*/

                    $.get("http://localhost:8080/crawler/verse",{url:_url},function (data) {
                        _this.verse = data;
                    })
                }
            },
            mounted:function () {
                /*//获取url
                var _url = getParams().url;
                console.log(_url);
                var _this = this;
                //发异步请求获取员工数据
                $.get("http://localhost:8080/crawler/verse",{url:"http://www.shicimingju.com/chaxun/list/4059.html"},function (data) {
                    _this.verse = data;
                })*/
            }
        })
    </script>
</body>
</html>